<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>4-柱状图-官方示例</title>
		<script type="text/javascript" src="js/jquery2.1.4.min.js"></script>
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<style type="text/css">
			.box{
				width:600px;
				height:500px;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<script type="text/javascript">
			window.addEventListener('load',function(e){
				//使用ajax请求数据
				$.ajax({
					url:'https://cache.iminutes.cn/api/soft/echart.html',
					type:"GET",
					data:{},
					dataType:'json',
					success:function(res){
						// console.log(res);
						if(res.status==200){
							setData(res);
						}else{
							alert('数据请求失败!');
						}
					}
				});
			});
			
			function setData(res){
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.querySelector('.box'));
				//设置数组
				var sourceData = [
					['product', '死亡病例', '现有确诊数', '治愈病例'],
				];
				
				var shArr = [];
				var bjArr = [];
				var sxArr = [];
				//循环后端返回的数据
				$.each(res.data,function(index,ele){
					// console.log(index);
					// console.log(ele);
					switch(index){
						case 0://上海
							shArr.push(ele.catename);
							shArr.push(ele.deadnum);
							shArr.push(ele.currentConfirmedNum);
							shArr.push(ele.curedNum);
							break;
						case 1://北京
							bjArr.push(ele.catename);
							bjArr.push(ele.deadnum);
							bjArr.push(ele.currentConfirmedNum);
							bjArr.push(ele.curedNum);
							break;
						case 2://陕西
							sxArr.push(ele.catename);
							sxArr.push(ele.deadnum);
							sxArr.push(ele.currentConfirmedNum);
							sxArr.push(ele.curedNum);
							break;
						default:
							//
							break;
					}
				});
				sourceData.push(shArr)
				sourceData.push(bjArr)
				sourceData.push(sxArr)
				// console.log(shArr);
				// console.log(bjArr);
				console.log(sourceData);
				// 指定图表的配置项和数据
				var option = {
				  legend: {},
				  tooltip: {},
				  dataset: {
/* 					source: [
					  ['product', '死亡病例', '现有确诊数', '治愈病例'],
					  ['上海市', 43.3, 85.8, 93.7],
					  ['北京市', 83.1, 73.4, 55.1],
					  ['陕西省', 86.4, 65.2, 82.5]
					] */
					source:sourceData
				  },
				  xAxis: { type: 'category' },
				  yAxis: {},
				  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			}
			
		</script>
	</body>
</html>